<template>
	<view class="user_edit_pay_password">
		<view class="pay_password_edit_content">
			<view class="item">
				<view class="t1">新支付密码：</view>
				<view class="t2">
					<input type="password" placeholder="输入支付密码" placeholder-style="font-size:28rpx">
				</view>
			</view>
			<view class="item">
				<view class="t1">重复支付密码：</view>
				<view class="t2">
					<input type="password" placeholder="再次输入支付密码" placeholder-style="font-size:28rpx">
				</view>
			</view>
			<view class="item">
				<view class="t1">验证码：</view>
				<view class="t2" style="display: flex;">
					<input type="text" class="yzm_class" placeholder="验证码" placeholder-style="font-size:28rpx">
					<text class="send_sms" @click="sendSms">{{text}}</text>
				</view>
			</view>
		</view>
		<view class="log-out-btn" @click="edit">确认修改</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					pay_password:'',
					re_pay_password:'',
					code:'',
				},
				num:0,
				text:'发送验证码',
				wait:false,
				user_info:{},
			};
		},
		onLoad() {
			this.checkLogin()
		},
		methods:{
			edit(){
				if(this.info.pay_password != this.info.re_pay_password){
					return this.$toast('两次输入不一致')
				}
				let obj = {...this.$api.users}
				obj.url += '/edit_user'
				obj.method = 'put'
				this.$http(obj,this.info).then(res=>{
					if(res.code == 200){
						this.$toast(res.msg)
						return this.$nav('',3)
					}else{
						this.$toast(res.msg)
					}
				})
			},
			sendSms(){
				if(this.wait){
					return this.$toast('请不要频繁发送短信')
				}
				if(this.user_info.phone == '' || this.user_info.phone == undefined || this.user_info.phone == null){
					return this.$toast('请先绑定您的手机号码')
				}
				this.$http(this.$api.sendSms,{phone:this.user_info.phone,name:'edit_user'}).then(res=>{
					if(res.code==200){
						this.num = 60;
						this.wait = true;
						let obj = setInterval(()=>{
							this.num--
							this.text = this.num+'s';
							if(this.num<1){
								clearInterval(obj);
								this.num = 0
								this.text = '发送验证码';
							}
						},1000);
					}else{
						return this.$toast(res.msg)
					}
				})
			},
			checkLogin(){
				let obj = {...this.$api.users}
				obj.url += '/info'
				this.$http(obj).then(res=>{
					if(res.code == 200){
						this.user_info = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
.user_edit_pay_password{
	border-top:1px solid #efefef;
	.pay_password_edit_content{
		background-color: #fff;
		padding: 0 30rpx;
		font-size: $uni-font-size-base;
		.item{
			line-height: 90rpx;
			height: 90rpx;
			border-bottom: 1px solid #efefef;
			display: flex;
			.t1{
				flex: 0 0 200rpx;
				text-align: right;
				padding-right: 30rpx;
			}
			.t2{
				width: 100%;
				height: 90rpx;
				margin-top: 24rpx;
				.yzm_class{
					width: 60%;
				}
				.send_sms{
					line-height: 40rpx;
					color:$uni-color-error;
				}
			}
			&:last-child{
				border-bottom: none;
			}
		}
	}
	.log-out-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 60rpx auto;
		color: #fff;
		background-color: #ea1f22;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 40, 43, 0.4);	
	}
}
</style>
